<template>
  <container>
    <div class="result">
      <Success theme="filled" :size="80" fill="#52c41a" />
      <h1 class="mt-20 mb-20">操作成功</h1>
      <p>很好！你是一个合格的小黑子！ps：请偷偷藏起你的鸡脚</p>
      <div class="buttons">
        <el-button type="primary">操作按钮</el-button>
        <el-button>操作按钮</el-button>
      </div>
      <div class="extra">
        <div class="extra-header">相关推荐</div>
        <div class="extra-content">
          <div class="extra-item tile-card p-20">
            <Github fill="#181818" :size="20" />
            <div class="content">
              <h4>Github</h4>
              <div>一个面向开源及私有软件项目的托管平台</div>
            </div>
          </div>
          <div class="extra-item tile-card p-20">
            <Taobao fill="#fe5100" :size="20" />
            <div class="content">
              <h4>淘宝网</h4>
              <div>亚太地区较大的网络零售、商圈</div>
            </div>
          </div>
          <div class="extra-item tile-card p-20">
            <Fanqiexiaoshuo fill="#d00c00" :size="20" />
            <div class="content">
              <h4>番茄小说</h4>
              <div>免费网文阅读APP，致力于为读者提供畅快不花钱的极致阅读体验</div>
            </div>
          </div>
          <div class="extra-item tile-card p-20">
            <Wechat fill="#04c15f" :size="20" />
            <div class="content">
              <h4>微信</h4>
              <div>一个为智能终端提供即时通讯服务的免费应用程序</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </container>
</template>

<script setup lang="ts">
import container from '@/components/container';
import { Fanqiexiaoshuo, Github, Taobao, Wechat, Success } from '@icon-park/vue-next';
</script>

<style scoped lang="scss">
.result {
  padding: 100px 0 50px;
  text-align: center;
  p {
    font-size: 14px;
    color: #999;
    margin-bottom: 20px;
  }
}
.extra {
  margin-top: 40px;
  background-color: #f6f6f6;
  position: relative;
  padding: 35px 30px 35px 50px;

  .extra-header {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
  }
  .extra-header {
    --f: 0.5em;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.8;
    padding-inline: 1lh;
    padding-bottom: var(--f);
    border-image: conic-gradient(#0008 0 0) 51% / var(--f);
    clip-path: polygon(
      100% calc(100% - var(--f)),
      100% 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),
      var(--f) calc(100% - var(--f)),
      0 100%,
      0 calc(100% - var(--f)),
      999px calc(100% - var(--f) - 999px),
      calc(100% - 999px) calc(100% - var(--f) - 999px)
    );
    transform: translate(calc((cos(45deg) - 1) * 100%), -100%) rotate(-45deg);
    transform-origin: 100% 100%;
    background: #cfdfff;
    background: linear-gradient(0deg, #cfdfff 0%, #6b9dff 100%);
  }

  .extra-content {
    text-align: initial;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    .extra-item {
      display: flex;
      width: calc(25% - (20px * 3 / 4));
      cursor: pointer;
      transition: all 240ms ease-in-out;

      .content {
        margin-left: 10px;

        > div {
          margin-top: 10px;
          font-size: 13px;
          color: #999999;
        }
      }

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>
